<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <#include "../../common/header.ftl">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/locale/bootstrap-table-zh-CN.min.js"></script>
    <link rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.5/css/bootstrap-select.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.5/js/bootstrap-select.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.5/js/i18n/defaults-zh_CN.min.js"></script>

    <script type="text/javascript"
            src="https://api.map.baidu.com/api?v=2.0&ak=j09GQBURkfAifzXdb1MZP8KgbQDVxmPw"></script>
    <script src="https://cdn.bootcss.com/echarts/4.2.0-rc.2/echarts.min.js"></script>
</head>
<body class="btn-body">
<div class="container-fluid">
    <#include "../../common/left-nav.ftl">
    <input type="hidden" value="${orderNo}" id="orderNo">
    <div class="main-box">
        <ol class="breadcrumb crumbs always-top">
            <li><a href="${base}/admin/project">项目管理</a></li>
            <li class="active">详情</li>

            <div class="form-btns">
                <button type="button" class="btn btn-success btn-sm" id="goodsBtn"
                        style="display: none;"
                        onclick="openGoodsModal()">
                    <span class="glyphicon glyphicon-plus"></span> 添加货物
                </button>

                <button type="button" class="btn btn-info btn-sm" id="sendBtn" onclick="sendToDriver()"
                        style="display: none;">
                    <span class="glyphicon glyphicon-ok-circle"></span> 下发至司机
                </button>

                <button type="button" class="btn btn-info btn-sm" id="confirmBtn" onclick="confirmOrder()"
                        style="display: none;">
                    <span class="glyphicon glyphicon-ok-circle"></span> 订单确认
                </button>

                <button type="button" class="btn btn-info btn-sm" id="payBtn" onclick="payOrder()"
                        style="display: none;">
                    <span class="glyphicon glyphicon-ok-circle"></span> 支付确认
                </button>

                <span class="separate">|</span>

                <button type="button" class="btn btn-danger btn-sm" id="closeBtn" style="display: none;"
                        onclick="closeOrder()">
                    <span class="glyphicon glyphicon-remove"></span> 撤销订单
                </button>
            </div>
        </ol>

        <div class="caption">
            <h2>${orderNo}
                <span data-field="status" data-field-target="enum" data-convert-func="showWaybillStatusName">-</span>
                <small>
                    <i data-field="type" data-field-target="enum" data-convert-func="showWaybillTypeName">-</i>
                </small>
            </h2>

        </div>

        <div class="container-fluid">
            <div class="row" style="margin-top: 20px;">
                <div class="col-md-6">
                    <div class="panel panel-freight">
                        <div class="panel-heading"><b>托运方信息</b></div>
                        <div class="panel-body">
                            <div class="details-panel">
                                <div class="item">
                                    <span class="field">联系人</span>
                                    <span class="value" data-field="shipper.name">-</span>
                                </div>

                                <div class="item">
                                    <span class="field">联系电话</span>
                                    <span class="value" data-field="shipper.tel">-</span>
                                </div>
                                <div class="item">
                                    <span class="field">所在地区</span>
                                    <span class="value" data-field="shipper.zone">-</span>
                                </div>
                                <div class="item">
                                    <span class="field">装货地点</span>
                                    <span class="value" data-field="shipper.address">-</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="panel panel-freight">
                        <div class="panel-heading"><b>收货方信息</b></div>
                        <div class="panel-body">
                            <div class="details-panel">
                                <div class="item">
                                    <span class="field">联系人</span>
                                    <span class="value" data-field="receiver.name">-</span>
                                </div>

                                <div class="item">
                                    <span class="field">联系电话</span>
                                    <span class="value" data-field="receiver.tel">-</span>
                                </div>
                                <div class="item">
                                    <span class="field">所在地区</span>
                                    <span class="value" data-field="receiver.zone">-</span>
                                </div>
                                <div class="item">
                                    <span class="field">装货地点</span>
                                    <span class="value" data-field="receiver.address">-</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <div class="panel panel-freight">
                        <div class="panel-heading"><b>货物详情</b></div>
                        <div class="panel-body">
                            <div class="details-panel">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="item">
                                            <span class="field">承运要求</span>
                                            <span class="value" data-field="claim">-</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="item">
                                            <span class="field">收货码</span>
                                            <span class="value"><b data-field="code">-</b></span>
                                        </div>

                                        <div class="item">
                                            <span class="field">约定路线</span>
                                            <span class="value" data-field="appointedRoute">-</span>
                                        </div>
                                        <div class="item">
                                            <span class="field">公里数</span>
                                            <span class="value"><i data-field="km"></i> 公里</span>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="item">
                                            <span class="field">运费</span>
                                            <span class="value"><i data-field="cost"></i> 元</span>
                                        </div>
                                        <div class="item">
                                            <span class="field">装车重量</span>
                                            <span class="value"><i data-field="weight"></i> 吨</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <table id="table"></table>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <div class="panel panel-freight">
                        <div class="panel-heading"><b>运输详情</b></div>
                        <div class="panel-body">
                            <div class="details-panel">
                                <div class="details-panel">
                                    <div id="carDriver" style="overflow:hidden;">
                                        <table id="carDriverTable">
                                        </table>
                                    </div>
                                    <div class="row" style="margin-top: 10px;">
                                        <div class="col-md-12" id="driverSelectBtn" style="display: none;">
                                            <button type="button" class="btn btn-info btn-block"
                                                    onclick="openCarDriverModal()">
                                                <span class="glyphicon glyphicon-check"></span>
                                                指派车辆和司机
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <div class="panel panel-freight">
                        <div class="panel-heading"><b>运输照片</b></div>
                        <div class="panel-body">
                            <div class="details-panel">
                                <div class="details-panel">
                                    <div class="waybill-images" id="waybillImages"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <div class="panel panel-freight">
                        <div class="panel-heading"><b>项目进度</b></div>
                        <div class="panel-body">
                            <div class="details-panel">
                                <ul class="time-line" id="logList"></ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

<div class="modal fade" id="goodsModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">货物</h4>
            </div>
            <div class="modal-body">
                <form id="goodsForm">
                    <div class="form-group">
                        <label for="displayName">品名</label>
                        <input type="text" class="form-control" name="displayName" placeholder="请输入货物名称">
                    </div>
                    <div class="form-group">
                        <label for="packages">包装</label>
                        <input type="text" class="form-control" name="packages" placeholder="请输入包装类型">
                    </div>
                    <div class="form-group" id="passwordDiv">
                        <label for="weights">重量/kg</label>
                        <input type="number" class="form-control" name="weights" placeholder="请输入货物重量">
                    </div>
                    <div class="form-group">
                        <label for="volume">体积/m³</label>
                        <input type="number" class="form-control" name="volume" placeholder="请输入货物体积">
                    </div>
                    <div class="form-group">
                        <label for="quantity">数量/件</label>
                        <input type="number" class="form-control" name="quantity" placeholder="请输入货物数量">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="saveGoodsData()">保存</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="carDriverModal" tabindex="-1" role="dialog" aria-labelledby="carDriverModalLabel">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="carDriverModalLabel">车辆</h4>
            </div>
            <div class="modal-body">
                <form id="goodsForm">
                    <div class="form-group">
                        <label for="carSelect">车辆</label>
                        <select id="carSelect" class="selectpicker" title="请选择" name="type"
                                data-live-search="true"></select>
                    </div>

                    <div class="form-group">
                        <label for="driverSelect">司机</label>
                        <select id="driverSelect" class="selectpicker" title="请选择" name="type"
                                data-live-search="true"></select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="saveCarDriver()">保存</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="carLocationModal" tabindex="-1" role="dialog" aria-labelledby="carLocationModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="carLocationModalLabel">车辆定位</h4>
            </div>
            <div class="modal-body">
                <div class="map-content" id="allMap" style="height: 400px;"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="loadTodayTrace('陕YH0009')">加载今日轨迹</button>
            </div>
        </div>
    </div>
</div>

</body>
</html>

<script type="text/javascript">
    var orderNo, goodsTable, map;
    var confirmBtn, sendBtn, goodsBtn, driverSelectBtn, closeBtn, carDriverTable, payBtn;
    $(document).ready(function () {
        orderNo = $('#orderNo').val();
        confirmBtn = $('#confirmBtn');
        sendBtn = $('#sendBtn');
        goodsBtn = $('#goodsBtn');
        driverSelectBtn = $('#driverSelectBtn');
        payBtn = $('#payBtn');
        closeBtn = $('#closeBtn');

        map = new BMap.Map("allMap");    // 创建Map实例
        map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
        //添加地图类型控件
        map.addControl(new BMap.MapTypeControl({
            mapTypes: [
                BMAP_NORMAL_MAP,
                BMAP_HYBRID_MAP
            ]
        }));
        map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的
        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
        map.setMapStyle({style: 'grayscale'});

        $.httpclient.get(API_WAYBILL + '/details/' + orderNo, {
            time: new Date().getTime()
        }, function (data) {
            fullField(data.obj);

            var waybill = data.obj;

            showBtns(waybill.status);

            if (waybill.type === 'DIRECT' && waybill.status === 'WAIT_PICK') {
                $('#driverSelectBtn').show();
            } else {
                $('#driverSelectBtn').hide();
            }

            var waybillImages = $('#waybillImages');
            var fileList = waybill.fileList;
            var imageRootPath = API_SERVER_URL + '/file/image/';
            if (fileList.length > 0) {
                for (var i = 0; i < fileList.length; i++) {
                    var item = fileList[i];
                    var imageUrl = imageRootPath + item.fileId;
                    waybillImages.append('<a href="' + imageUrl + '" ' +
                        'target="_blank"><img src="' + imageUrl + '"/></a>')
                }

            } else {
                waybillImages.html('<p style="text-align: center;">无数据</p>');
            }


            goodsTable = $('#table');
            goodsTable.bootstrapTable({
                data: data.obj.goodsList,
                pagination: false,
                columns: [
                    {field: 'id', title: 'ID', visible: false},
                    {field: 'displayName', title: '品名'},
                    {field: 'packages', title: '包装', width: 100, align: 'center'},
                    {field: 'weights', title: '重量/kg', width: 100, align: 'center'},
                    {field: 'volume', title: '体积/m³', width: 100, align: 'center'},
                    {field: 'lwh', title: '长/宽/高/m', width: 100, align: 'center'},
                    {field: 'quantity', title: '数量/件', width: 100, align: 'center'},
                    {
                        field: 'id', title: '操作', width: 100, align: 'center', formatter: function (value) {
                            return '<a href="javascript:removeGoods(' + value + ')">删除</a>';
                        }
                    }
                ]
            });

            carDriverTable = $('#carDriverTable');
            carDriverTable.bootstrapTable({
                data: data.obj.carAndDriverList,
                pagination: false,
                columns: [
                    {field: 'id', title: 'ID', visible: false},
                    {field: 'realName', title: '司机姓名', width: 100, align: 'center'},
                    {field: 'tel', title: '联系电话', width: 100, align: 'center'},
                    {field: 'carNumber', title: '车牌号', width: 100, align: 'center'},
                    {
                        field: 'type', title: '车型', width: 100, align: 'center', formatter: function (value) {
                            return showCarTypeName(value);
                        }
                    },
                    {field: 'trailerNo', title: '挂车', width: 100, align: 'center'},
                    {
                        field: 'boxHigh',
                        title: '货箱长宽高/m',
                        width: 150,
                        align: 'center',
                        formatter: function (value, row) {
                            return row.boxLong + " * " + row.boxWidth + " * " + row.boxHigh;
                        }
                    },
                    {field: 'maxLoad', title: '载重/吨', width: 100, align: 'center'},
                    {field: 'address', title: '联系地址'},
                    {
                        field: 'price', title: '报价/元', width: 100, align: 'center'},
                    {
                        field: 'status', title: '状态', width: 100, align: 'center', formatter: function (value) {
                            return showAcceptedStateName(value);
                        }
                    },
                    {
                        field: 'id', title: '操作', width: 150, align: 'center', formatter: function (value, row) {
                            var status = row.status;
                            var btns = '<a href="javascript:openCarLocationModal(\'' + row.carNumber + '\')">定位</a>';
                            if (status === 'STANDBY' && waybill.type === 'PUBLIC') {
                                btns += ' | <a href="javascript:accessCarDriver(' + value + ')">接受</a> | ' +
                                    '<a href="javascript:removeCarDriver(' + value + ')">移除</a>'
                            } else if (status === 'STANDBY' && waybill.type === 'DIRECT') {
                                btns += ' | <a href="javascript:removeCarDriver(' + value + ')">移除</a>'
                            }
                            return btns;
                        }
                    }
                ]
            });

            var logs = data.obj.logs;
            for (var i = 0; i < logs.length; i++) {
                var item = logs[i];
                var $li = $('<li></li>');
                var $i = $('<i class="glyphicon glyphicon-time"></i>');
                if (i === 0) {
                    $i.addClass('new');
                }
                var $span = $('<span></span>');
                $span.text(new Date(item.eventDate).format('yyyy-MM-dd hh:mm:ss'));
                $li.append($i);
                $li.append($span);
                $li.append(' ' + item.content);
                $('#logList').append($li);
            }
        });
    });

    function showBtns(orderStatus) {
        switch (orderStatus) {
            case 'CREATED':     //运单建立
                goodsBtn.show();
                sendBtn.show();
                closeBtn.show();
                break;
            case 'WAIT_PICK':   //等待接单
                confirmBtn.show();
                closeBtn.show();
                break;
            case 'PICKED':      //已接单
                closeBtn.show();
                break;
            case 'IN_TRANSIT':  //运输中
                break;
            case 'ARRIVALS':    //到达目的地
                break;
            case 'WAIT_PAY':    //待付款
                payBtn.show();
                break;
            case 'DONE':        //完成
                break;
            case 'CANCEL':      //取消
                break;
            default:
                break;
        }
    }

    function openGoodsModal() {
        $('#goodsForm')[0].reset();
        $('#goodsModal').modal('show');
    }

    function saveGoodsData() {
        var form = $('#goodsForm');
        var formData = {};
        form.find('input').each(function () {
            formData[this.name] = this.value;
        });
        formData['orderNo'] = orderNo;
        $.httpclient.post(API_GOODS + '/' + orderNo, JSON.stringify(formData), function (data) {
            location.reload();
        })
    }

    function removeGoods(id) {
        bootbox.confirm({
            size: "small",
            message: '是否删除此货物信息?',
            buttons: {
                confirm: {
                    label: '是',
                    className: 'btn-danger'
                },
                cancel: {
                    label: '否',
                    className: 'btn-success'
                }
            },
            callback: function (result) {
                if (result) {
                    $.httpclient.delete(API_GOODS + '/' + orderNo + "?goodsId=" + id, {
                        time: new Date().getTime()
                    }, function () {
                        location.reload();
                    });
                }
            }
        });
    }

    function openCarDriverModal() {

        var tableDatas = carDriverTable.bootstrapTable("getData");

        if (tableDatas.length > 0){
            bootbox.alert('只能指派一个司机和车辆，如需选择其他司机，请移除已添加的司机');
            return false;
        }

        var carSelect = $('#carSelect');
        var driverSelect = $('#driverSelect');
        carSelect.empty();
        driverSelect.empty();

        $.httpclient.get(API_CAR + '/my', {
            time: new Date().getTime()
        }, function (data) {
            var datas = data.obj;
            for (var i = 0; i < datas.length; i++) {
                var item = datas[i];
                var $option = $('<option></option>')
                $option.attr('value', item.id);
                $option.text(item.carNumber);
                carSelect.append($option);
            }
            carSelect.selectpicker('refresh');

            carSelect.on('changed.bs.select', function () {
                $.httpclient.get(API_CAR + '/driver', {
                    carId: this.value,
                    time: new Date().getTime()
                }, function (data) {
                    driverSelect.empty();
                    var datas = data.obj;
                    for (var i = 0; i < datas.length; i++) {
                        var item = datas[i];
                        var $option = $('<option></option>')
                        $option.attr('value', item.id);
                        $option.text(item.realName);
                        driverSelect.append($option);
                    }
                    driverSelect.selectpicker('refresh');
                });


            });

            $('#carDriverModal').modal('show');
        });
    }

    function saveCarDriver() {
        var carId = $('#carSelect').val();
        var driverId = $('#driverSelect').val();

        $('#carDriverModal').modal('hide');

        $.httpclient.post(API_WAYBILL + '/bind/car', JSON.stringify({
            orderNo: orderNo,
            carId: carId,
            driverId: driverId
        }), function () {
            location.reload();
        })
    }

    function removeCarDriver(id) {
        bootbox.confirm({
            size: "small",
            message: '是否移除车辆和司机?',
            buttons: {
                confirm: {
                    label: '是',
                    className: 'btn-danger'
                },
                cancel: {
                    label: '否',
                    className: 'btn-success'
                }
            },
            callback: function (result) {
                if (result) {
                    $.httpclient.delete(API_WAYBILL + '/bind/car?id=' + id + '&orderNo=' + orderNo, {
                        time: new Date().getTime()
                    }, function () {
                        location.reload();
                    });
                }
            }
        });
    }

    function sendToDriver() {
        bootbox.confirm({
            size: "small",
            message: '是否确认下发运单信息给司机?',
            buttons: {
                confirm: {
                    label: '是',
                    className: 'btn-danger'
                },
                cancel: {
                    label: '否',
                    className: 'btn-success'
                }
            },
            callback: function (result) {
                if (result) {
                    $.httpclient.put(API_WAYBILL + '/' + orderNo + '/send/river', {
                        time: new Date().getTime()
                    }, function () {
                        location.reload();
                    });
                }
            }
        });
    }

    function confirmOrder() {
        var tableDatas = carDriverTable.bootstrapTable("getData");
        if (tableDatas.length > 1){
            bootbox.alert('只能选择一个司机执行本次运输任务，请移除多余的司机');
            return false;
        }

        bootbox.confirm({
            size: "small",
            message: '是否开始执行该运单?',
            buttons: {
                confirm: {
                    label: '是',
                    className: 'btn-danger'
                },
                cancel: {
                    label: '否',
                    className: 'btn-success'
                }
            },
            callback: function (result) {
                if (result) {
                    $.httpclient.put(API_WAYBILL + '/' + orderNo + '/confirm', {
                        time: new Date().getTime()
                    }, function () {
                        location.reload();
                    });
                }
            }
        });
    }

    function payOrder() {
        bootbox.confirm({
            size: "small",
            message: '是否已经完成运单费用的支付?',
            buttons: {
                confirm: {
                    label: '是',
                    className: 'btn-danger'
                },
                cancel: {
                    label: '否',
                    className: 'btn-success'
                }
            },
            callback: function (result) {
                if (result) {
                    $.httpclient.put(API_WAYBILL + '/' + orderNo + '/pay', {
                        time: new Date().getTime()
                    }, function () {
                        location.reload();
                    });
                }
            }
        });
    }

    function closeOrder() {
        bootbox.confirm({
            size: "small",
            message: '是否确认取消该订单？此操作不能撤销！',
            buttons: {
                confirm: {
                    label: '是',
                    className: 'btn-danger'
                },
                cancel: {
                    label: '否',
                    className: 'btn-success'
                }
            },
            callback: function (result) {
                if (result) {
                    $.httpclient.put(API_WAYBILL + '/' + orderNo + '/close', {
                        time: new Date().getTime()
                    }, function () {
                        location.reload();
                    });
                }
            }
        });
    }

    function accessCarDriver(id) {
        bootbox.confirm({
            size: "small",
            message: '是否确认该司机执行此次运输订单？',
            buttons: {
                confirm: {
                    label: '是',
                    className: 'btn-danger'
                },
                cancel: {
                    label: '否',
                    className: 'btn-success'
                }
            },
            callback: function (result) {
                if (result) {
                    $.httpclient.post(API_WAYBILL + '/access/car/driver/' + id, {
                        time: new Date().getTime()
                    }, function () {
                        location.reload();
                    });
                }
            }
        });
    }

    function openCarLocationModal(carNumber) {
        $('#carLocationModal').modal('show');
        map.clearOverlays();
        $.httpclient.get(API_CAR_LOCATION + '/' + carNumber, {
            time: new Date().getTime()
        }, function (data) {
            var res = data.obj;
            var lat = res.lat;
            var lon = res.lon;
            var point = new BMap.Point(lon, lat);

            var convertor = new BMap.Convertor();
            var pointArr = [];
            pointArr.push(point);
            convertor.translate(pointArr, 1, 5, function (data) {
                if (data.status === 0) {
                    point = data.points[0];
                    var marker = new BMap.Marker(point);
                    map.addOverlay(marker);
                    map.setCenter(point);
                }
            });
        });
    }

    function loadTodayTrace(carNumber) {
        var startTime = new Date();
        startTime.setHours(startTime.getHours() - 6, 0, 0, 0);

        $.httpclient.get(API_CAR_LOCATION + '/track/' + carNumber, {
            time: new Date().getTime(),
            startTime: startTime.getTime(),
            endTime: new Date().getTime()
        }, function (data) {
            var res = data.obj;
            var pointList = [];
            for (var i = 0; i < res.length; i++) {
                var gps = res[i];
                var point = new BMap.Point(gps.lon, gps.lat);

                if (!gps.lon) {
                    console.info(gps);
                }

                pointList.push(point);
            }

            var polyline = new BMap.Polyline([], {
                strokeWeight: '5',//折线的宽度，以像素为单位
                strokeOpacity: 0.8,//折线的透明度，取值范围0 - 1
                strokeColor: "#18a45b" //折线颜色
            });
            map.addOverlay(polyline);

            console.info(polyline.getPath());

            polyline.setPath(pointList);
            map.setViewport(pointList);
        });
    }

</script>
